import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React, { useImperativeHandle, useMemo, useRef, useState, useCallback, } from "react";
import { templateListApi, templateNameIfExistApi } from "./service";
import { Popup, DataGrid, Button, Form, } from "devextreme-react";
import { Column } from "devextreme-react/data-grid";
import notify from "devextreme/ui/notify";
import DevPopup from "~/public/cpas-ui/components-ui/express-components/DevPopup/DevPopup";
import "./_style.less";
import { LoadPanel } from "devextreme-react/load-panel";
import { RequiredRule, SimpleItem } from "devextreme-react/form";
const SavePopup = React.forwardRef((props, ref) => {
    const [visible, setVisible] = useState(false);
    const [visibleOther, setVisibleOther] = useState(false);
    const [devTableData, setDevTableData] = useState([]);
    const devGridRef = useRef();
    const InputRef = useRef();
    const refsForm = useRef();
    const [loadPanelVisible, setLoadPanelVisible] = useState(false);
    const [selectData, setSelectData] = useState({});
    const [selectDataOther, setSelectDataOther] = useState({
        tempName: "",
        reportType: "",
    });
    const getTempleteList = async () => {
        setLoadPanelVisible(true);
        const res = await templateListApi();
        if (res.success) {
            let temList = [];
            if (props?.changeData?.cloudTempType) {
                temList = res.data.filter((a) => a.tempType === props.changeData.cloudTempType);
            }
            else {
                temList = res.data.filter((a) => a.tempType === "报告系统模板");
            }
            setDevTableData(temList);
        }
        else {
            notify(`${res.msg}`, "error", 2000);
        }
        setLoadPanelVisible(false);
    };
    // 自定义方法
    useImperativeHandle(ref, () => ({
        showTemplate: () => {
            getTempleteList();
            setVisible(true);
        },
        reloadTemplate: () => {
            getTempleteList();
        },
    }));
    const onSelectionData = useCallback(({ selectedRowsData }) => {
        if (selectedRowsData[0]) {
            setSelectData(selectedRowsData[0]);
        }
    }, [selectData]);
    const closePopup = () => {
        setVisible(false);
        setDevTableData([]);
    };
    const okFunc = async (v) => {
        if (!v)
            return notify("请选择模板名称！", "warning", 2000);
        await props?.okCallback(v);
    };
    const okOtnerSaveFunc = () => {
        setVisibleOther(true);
        // InputRef.current.show({
        //   title: "另存为新模板",
        //   okCallback: async (v: any) => {
        //     if (!v) return notify("请输入模板名称", "error", 2000);
        //     const resName = await templateNameIfExistApi({
        //       templateName: v,
        //     });
        //     if (resName.success) {
        //       getTempleteList();
        //       okFunc(v);
        //     } else {
        //       notify("报错模板名失败！", "error", 2000);
        //     }
        //   },
        //   value: "",
        // });
    };
    const cancelOtherFun = () => {
        setVisibleOther(false);
    };
    const okOtherBtn = async () => {
        const devForm = refsForm.current;
        const result = devForm.instance.validate();
        if (result && result.isValid) {
            // 模版名字重复校验
            if (devTableData.filter((a) => a.tempName === selectDataOther.tempName)
                .length) {
                notify("模板名字已经存在！", "error", 2000);
                return;
            }
            const resName = await templateNameIfExistApi({
                templateName: selectDataOther.tempName,
                reportType: selectDataOther.reportType,
            });
            if (resName.success) {
                setVisibleOther(false);
                await okFunc(selectDataOther.tempName);
                await getTempleteList();
            }
            else {
                notify("报错模板名失败！", "error", 2000);
            }
        }
    };
    return (_jsxs(_Fragment, { children: [_jsxs(Popup, { ref: ref, title: "\u6A21\u677F\u4FDD\u5B58", dragOutsideBoundary: true, resizeEnabled: true, visible: visible, width: 650, height: 500, ...props, onHiding: () => {
                    closePopup();
                }, children: [_jsx(LoadPanel, { shadingColor: "rgba(0,0,0,0.4)", visible: loadPanelVisible }), _jsxs("div", { style: {
                            display: "flex",
                            alignItems: "center",
                            justifyContent: "space-between",
                            marginBottom: "8px",
                        }, children: [_jsx("div", { children: "\u63D0\u793A\uFF1A\u9009\u4E2D\u672C\u5730\u6A21\u677F\uFF0C\u53EF\u4EE5\u66FF\u6362\u672C\u5730\u6A21\u677F\u3002" }), _jsxs("div", { style: {
                                    display: "flex",
                                    alignItems: "center",
                                    justifyContent: "space-between",
                                    marginBottom: "8px",
                                }, children: [_jsx(Button, { className: "defaultBtnWhite", onClick: () => okFunc(selectData.tempName), text: "\u786E\u5B9A" }), _jsx(Button, { type: "default", className: "defaultBtn", onClick: () => {
                                            setVisibleOther(true);
                                            setSelectDataOther({
                                                tempName: "",
                                                reportType: "",
                                            });
                                        }, text: "\u53E6\u5B58\u4E3A\u65B0\u6A21\u677F" })] })] }), _jsx("div", { style: {
                            width: "100%",
                            height: "calc(100% - 50px)",
                        }, children: useMemo(() => {
                            return (_jsxs(DataGrid, { height: "100%", width: "100%", dataSource: devTableData, keyExpr: "id", className: "PaperDevSortableGrid devHeadersCenter", ref: devGridRef, showBorders: true, showRowLines: true, showColumnLines: true, scrolling: { rowRenderingMode: "virtual" }, selection: {
                                    mode: "single",
                                }, onSelectionChanged: onSelectionData, paging: {
                                    enabled: false,
                                }, groupPanel: {
                                    visible: false,
                                }, children: [_jsx(Column, { caption: "\u5E8F\u53F7", alignment: "center", width: 70, cellRender: (row) => {
                                            const { data, rowIndex } = row;
                                            return _jsx("div", { children: rowIndex + 1 });
                                        } }), _jsx(Column, { caption: "\u6A21\u677F\u540D\u79F0", dataField: "tempName", alignment: "left", dataType: "string" }), _jsx(Column, { width: 90, caption: "\u62A5\u544A\u7C7B\u578B", dataField: "reportType", alignment: "left", dataType: "string" })] }));
                        }, [devTableData]) })] }, `${new Date().getDate()}`), _jsx(DevPopup.Input, { ref: InputRef }), _jsx(Popup
            // ref={ref}
            , { 
                // ref={ref}
                title: "\u53E6\u5B58\u4E3A\u65B0\u6A21\u677F", dragOutsideBoundary: true, resizeEnabled: true, visible: visibleOther, width: 450, height: 240, onHiding: () => {
                    cancelOtherFun();
                }, toolbarItems: [
                    {
                        widget: "dxButton",
                        toolbar: "bottom",
                        location: "after",
                        options: {
                            text: "取消",
                            onClick: () => cancelOtherFun(),
                        },
                    },
                    {
                        widget: "dxButton",
                        toolbar: "bottom",
                        location: "after",
                        options: {
                            text: "确定",
                            type: "default",
                            onClick: () => {
                                okOtherBtn();
                            },
                        },
                    },
                ], children: _jsxs(Form, { colCount: 2, ref: refsForm, formData: selectDataOther, children: [_jsx(SimpleItem, { colSpan: 2, dataField: "tempName", label: { text: "模板名称" }, editorOptions: { valueChangeEvent: "keyup" }, children: _jsx(RequiredRule, { message: "\u6A21\u677F\u540D\u79F0\u662F\u5FC5\u586B\u9879" }) }), _jsx(SimpleItem, { colSpan: 2, label: { text: "报告类型" }, dataField: "reportType", editorType: "dxSelectBox", editorOptions: {
                                dataSource: ["上市", "国企"],
                                placeholder: "请选择报告类型",
                            }, children: _jsx(RequiredRule, { message: "\u62A5\u544A\u7C7B\u578B\u662F\u5FC5\u586B\u9879" }) })] }) })] }));
});
export default SavePopup;
